<template>
  <div>
    <BasicTable @register="registerTable" @edit-change="handleEditChange">
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
    <a-button block class="mt-5" type="dashed" @click="handleAdd"> 新增规格 </a-button>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, toRefs, watch } from 'vue';
  import { columns } from './specs.data';

  import {
    ActionItem,
    BasicColumn,
    BasicTable,
    EditRecordRow,
    TableAction,
    useTable,
  } from '/@/components/Table';
  import { getListAll } from '/@/api/cuisine/cuisineSpecs';

  export default defineComponent({
    components: { BasicTable, TableAction },
    props: {
      cuisineId: { type: String },
    },
    setup(props) {
      const { cuisineId } = toRefs(props);

      watch(cuisineId, (newVal) => {
        if (newVal) {
          fetch(newVal);
        }
      });

      const cuisineSpecsData = ref<any[]>([]);

      async function fetch(cuisineId) {
        cuisineSpecsData.value = await getListAll({
          cuisineId,
        });

        /*for (let item of cuisineSpecsData.value) {
          item.id = null;
        }*/
      }

      const [registerTable, { getDataSource }] = useTable({
        canResize: false,
        columns: columns,
        showIndexColumn: false,
        dataSource: cuisineSpecsData,
        actionColumn: {
          width: 160,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        pagination: false,
      });

      function handleEdit(record: EditRecordRow) {
        record.onEdit?.(true);
      }

      function handleCancel(record: EditRecordRow) {
        record.onEdit?.(false);
        const data = getDataSource();
        const index = data.findIndex((item) => item.key === record.key);
        data.splice(index, 1);
      }
      function handleDelete(record: EditRecordRow) {
        record.onEdit?.(false);
        const data = getDataSource();
        const index = data.findIndex((item) => item.key === record.key);
        data.splice(index, 1);
      }
      function handleSave(record: EditRecordRow) {
        record.onEdit?.(false, true);
      }

      function handleEditChange(data: Recordable) {
        console.log(data);
      }

      function handleAdd() {
        const data = getDataSource();
        const addRow: EditRecordRow = {
          specsId: '',
          money: '',
          editable: true,
          key: `${Date.now()}`,
        };
        data.push(addRow);
      }

      function createActions(record: EditRecordRow, column: BasicColumn): ActionItem[] {
        if (!record.editable) {
          return [
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            },
            {
              label: '删除',
              onClick: handleDelete.bind(null, record),
            },
          ];
        }
        return [
          {
            label: '保存',
            onClick: handleSave.bind(null, record, column),
          },
          {
            label: '取消',
            popConfirm: {
              title: '是否取消编辑',
              confirm: handleCancel.bind(null, record, column),
            },
          },
        ];
      }

      return {
        registerTable,
        handleEdit,
        createActions,
        handleAdd,
        getDataSource,
        handleEditChange,
      };
    },
  });
</script>
